import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  username: FormControl = new FormControl("aaa");
  // FormGroup可以有多个FormControl
  formModel: FormGroup = new FormGroup({
    username: new FormControl("aaa"),
    dateRange: new FormGroup({
      from: new FormControl(),
      to: new FormControl()
    }),
    emails: new FormArray([
      new FormControl("a@a.com"),
      new FormControl("b@b.com")
    ])
  });
  // FormArray和formModel不同 ，FormArray没有key


  constructor() { }

  ngOnInit() {
  }

  onSubmit() {
    console.log(this.formModel.value);
  }

  addEmail() {
    let emails = this.formModel.get("emails") as FormArray;
    emails.push(new FormControl());
  }

}

// 响应式表单和模板式表单的不同
// 响应式表单的指令是form开头的；模板式表单的指令是ngModel,ngModelGroup开头的
// 响应式表单的form指令不能#myForm="ngForm"这样引用
// 模板式表单只能在模板上操作，响应式表单只能在代码里操作
